<!--
* @description 
* @fileName main.vue
* @author huangyu
* @date 2023/02/07 15:45:07
!-->
<template>
    <div>
        <el-form :inline="true" style="padding:0 20px;">
            <el-form-item>
                <el-input v-model="goodsName" placeholder="请输入物品名称"></el-input>
            </el-form-item>
            <el-form-item label="上/下架">
                <el-select v-model="onSale" style="width:80px">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="上架" :value="true"></el-option>
                    <el-option label="下架" :value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="门派">
                <el-select v-model="classStr" style="width:100px">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option :label="item.label" :value="item.value" v-for="(item,index) in classItemList" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="clickAdd">添加寄售物品</el-button>
                <el-button type="warning" @click="createImage">生成预览图</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="list" highlight-current-row border >
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column label="物品图标" width="80">
                <template slot-scope="scope">
                    <div style="height:36px;position: relative;">
                        <img :src="`https://7765-web-cloud0713-6g519i65f479e638-1301064135.tcb.qcloud.la/GamePublic/${scope.row.icon}`" alt="">
                        <div class="zx-icon-bg"></div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="物品名称" prop="goodsName" width="200"></el-table-column>
            <el-table-column label="物品等级" width="100">
                <template slot-scope="scope">
                    {{scope.row.level}}
                </template>
            </el-table-column>
            <el-table-column label="所属职业" width="100">
                <template slot-scope="scope">
                    {{scope.row.classStr}}
                </template>
            </el-table-column>
            <el-table-column label="物品类型" width="100">
                <template slot-scope="scope">
                    {{scope.row.pinzhi}}
                </template>
            </el-table-column>
            <el-table-column label="强化等级" width="100" prop="strong"></el-table-column>
            <el-table-column label="售卖单价" width="120" prop="money">
                <template slot-scope="scope">
                    <strong class="color_danger">{{scope.row.money}}</strong>
                    {{scope.row.priceType=='1'?'金币':scope.row.priceType=='2'?'炼器符':scope.row.priceType=='3'?'RMB':''}}
                </template>
            </el-table-column>
            <el-table-column label="售卖数量" width="100" prop="number"></el-table-column>
            <el-table-column label="物品图片" prop="goodsImage" width="100">
                <template slot-scope="scope">
                    <el-tooltip placement="right" effect="light">
                        <div slot="content">
                            <el-image :src="scope.row.goodsImage"></el-image>
                        </div>
                        <i class="el-icon-picture-outline color_blue" style="font-size:16px;" v-if="scope.row.goodsImage"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remake"></el-table-column>
            <el-table-column label="状态" width="100" prop="onSale">
                <template slot-scope="scope">
                    <div class="color_success" v-if="scope.row.onSale">上架</div>
                    <div class="color_danger" v-else>下架</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="editBooth(scope.row)">编辑</el-button>
                    <el-button type="primary" v-if="!scope.row.onSale" size="mini" @click="clickOnSale(scope.row)" plain>上架</el-button>
                    <el-button type="primary" v-else size="mini" @click="clickDownSale(scope.row)" plain>下架</el-button>
                    <el-button type="danger" size="mini" @click="clickDel(scope.row)" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
        :total="total"
        :current-page="pageindex"
        :display="pagesize"
        @pagechange="pagechange"
        ></pagination>

        <el-dialog :title="sellForm._id?'编辑售卖物品':'添加售卖物品'" top="50px" width="650px" :visible.sync="dialogSell" v-dialogDrag>
            <el-form label-width="120px">
                <el-form-item label="选择物品">
                    <div v-if="sellForm._id">{{sellForm.goodsName}}</div>
                    <div v-else>
                        <el-input v-model="sellForm.goodsName" disabled style="width:60%;margin-right:10px;"></el-input>
                        <el-button type="primary" plain @click="changeGoods">选择</el-button>
                        <el-button type="danger" plain @click="delGoods">清空</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="售卖单价">
                    <el-input v-model="sellForm.money" placeholder="请输入售卖价格"></el-input>
                    <el-radio-group v-model="sellForm.priceType">
                        <el-radio label="1">金币</el-radio>
                        <el-radio label="2">炼器符</el-radio>
                        <!-- <el-radio label="3">RMB</el-radio> -->
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="强化等级">
                    <el-input v-model="sellForm.strong" placeholder="请输入强化等级"></el-input>
                </el-form-item>
                <el-form-item label="售卖数量">
                    <el-input v-model="sellForm.number" placeholder="请输入售卖数量"></el-input>
                </el-form-item>
                <el-form-item label="物品图片">
                    <div style="width:88px;height:88px;border:50%;border:1px solid #ddd;margin-bottom:10px;">
                        <el-image :src="sellForm.goodsImage" fit="contain" v-if="sellForm.goodsImage" style="width:88px;height:88px;" />
                        <el-image src="/game/images/game/zhuxian/userImage.png" v-else />
                    </div>
                    <vUploadFile @tempFileURL="tempFileURL"></vUploadFile>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="sellForm.remake" type="textarea" placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitBooth">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="选择物品" width="1280px" top="50px" :visible.sync="dialogGoods">
            <vGoods @changeData="changeGoodsData"></vGoods>
        </el-dialog>

        <!-- 生成预览图 -->
        <el-dialog title="摊位预览图" top="50px" :visible.sync="dialogCreateImage" v-dialogDrag>
            <el-input v-model="twTitle" placeholder="摊位名称"></el-input>
            <el-row style="margin-top:20px;">
                <el-col v-for="(item,index) in listAll" :key="index" :span="6">
                    <div v-if="item.onSale">
                        <div style="height:36px;position: relative;float:left;">
                            <img :src="`https://7765-web-cloud0713-6g519i65f479e638-1301064135.tcb.qcloud.la/GamePublic/${item.icon}`" alt="">
                            <div class="zx-icon-bg"></div>
                        </div>
                        <div style="float:left;margin-left:10px;margin-bottom:10px;">
                            <span>{{item.classStr[0]}}{{item.classStr[1]}}</span>
                            <span>{{item.level}},</span>
                            <span>{{item.sexStr}},</span>
                            <div>
                                <span v-if="item.money" class="color_danger">{{item.money}}{{item.priceType=='1'?'金':item.priceType=='2'?'符':''}}*{{item.number}}</span>
                                <span v-if="item.strong">,+{{item.strong}},</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import pagination from "@/components/common/pagination.vue";
import vGoods from "../goods/goods.vue"
import { classItem } from "@/enum/zhuxian.js"
import vUploadFile from "@/components/system/upload_file.vue"
export default {
    components: { pagination,vGoods,vUploadFile },
    props:{},
    data() {
        return {
            token: this.$store.state.token,
            classItemList: classItem,
            list: [],
            listAll: [],
            goodsName: "",
            onSale: true,
            classStr: null,
            pageindex: 1,
            pagesize: 20,
            total: 0,

            sellForm: {
                priceType: "1",
                goodsImage: "",
            },
            dialogSell: false,
            dialogGoods: false,
            dialogCreateImage: false,
            twTitle: "",
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        tempFileURL(url){
            this.$set(this.sellForm, "goodsImage", url)
        },
        clickAdd(){
            this.sellForm = {}
            this.$set(this.sellForm, "priceType", "1")
            this.$set(this.sellForm, "goodsImage", "")
            this.dialogSell = true
        },
        editBooth(row){
            this.sellForm = row
            if(!this.sellForm.goodsImage){
                this.sellForm.goodsImage = ""
            }
            this.dialogSell = true
        },
        submitBooth(){
            if(!this.sellForm.goodsId){
                this.$message.error("请选择物品")
                return
            }
            if(this.sellForm.money){
                this.sellForm.money = Number(this.sellForm.money)
            }
            if(this.sellForm.number){
                this.sellForm.number = Number(this.sellForm.number)
            }
            // console.log(this.sellForm)
            let params = {
                type: 'getBooth',
                api: 'api-booth-edit',
                token: this.$store.state.token,
                data: this.sellForm,
            }
            get('game', params).then(res => {
                if (res) {
                    if(res.type=='error'){
                        this.$message.error(res.msg)
                        return
                    }
                    if(res.requestId){
                        this.$message.success("保存成功！")
                        this.dialogSell = false
                        this.getData()
                    }
                }
            })
        },
        delGoods(){
            this.sellForm.goodsId = ""
            this.sellForm.goodsName = ""
        },
        changeGoodsData(row){
            this.sellForm.goodsId = row._id
            this.sellForm.goodsName = row.name
            this.dialogGoods = false
        },
        changeGoods(){
            this.dialogGoods = true
        },
        
        getData(){
            let params = {
                type: 'getBooth',
                api: 'api-booth-list-my',
                token: this.$store.state.token,
                data: {
                    goodsName: this.goodsName,
                    onSale: this.onSale,
                    classStr: this.classStr,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    // console.log(res)
                    this.list = res.list
                    this.total = res.total
                }
            })
        },
        pagechange: function(currentPage) {
            this.pageindex = currentPage;
            this.getData();
        },

        // 上架
        clickOnSale(row){
            let params = {
                type: 'getBooth',
                api: 'api-booth-edit',
                token: this.token,
                data: {
                    _id: row._id,
                    onSale: true,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    if(res.requestId){
                        this.$message.success("上架成功！")
                        this.dialogSell = false
                        this.getData()
                    }
                }
            })
        },
        // 下架
        clickDownSale(row){
            let params = {
                type: 'getBooth',
                api: 'api-booth-edit',
                token: this.token,
                data: {
                    _id: row._id,
                    onSale: false,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    if(res.requestId){
                        this.$message.success("下架成功！")
                        this.getData()
                    }
                }
            })
        },
        // 删除
        clickDel(row){
            this.$confirm(`确认要删除" ${row.goodsName} "吗？`, "提示").then(() => {
                let params = {
                    type: 'getBooth',
                    api: 'api-booth-del',
                    token: this.token,
                    data: {
                        _id: row._id,
                    },
                }
                get('game', params).then(res => {
                    if (res) {
                        this.$message.success("删除成功！")
                        this.getData()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        },

        
        // 生成预览图
        createImage(){
            this.dialogCreateImage = true
            this.getDataAll()
        },

        getDataAll(){
            let params = {
                type: 'getBooth',
                api: 'api-booth-list-my',
                token: this.$store.state.token,
                data: {
                    goodsName: this.goodsName,
                    onSale: true,
                    classStr: this.classStr,
                    pageIndex: this.pageindex,
                    pageSize: 100,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    this.listAll = res.list
                }
            })
        },
        
    },
}
</script>

<style scoped>

</style>